<template>
  <h4 style="color: black">新增病虫害防治记录</h4>
  <hr class="newhr" />
  <!-- NewFrom 抽屉里表单 -->
  <el-form
    :model="RuleFormData"
    ref="form"
    :rules="rules"
    label-width="120px"
    size="default"
    :props="{
      label: (data) => {
        console.log('data', data)
      }
    }"
  >
    <div class="flex">
      <el-form-item label="防治时间">
        <el-col :span="24">
          <el-date-picker
            v-model="RuleFormData.curetime"
            type="date"
            placeholder="请选择防治时间"
            style="width: 100%"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-col>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="防治对象">
        <el-input v-model="RuleFormData.cureobject" />
      </el-form-item>
      <el-form-item label="防治规模(亩)">
        <el-input v-model="RuleFormData.curescale" />
      </el-form-item>
    </div>
    <el-form-item label="防治办法">
      <el-input v-model="RuleFormData.cureway" />
    </el-form-item>
    <el-form-item label="情况说明">
      <el-input v-model="RuleFormData.preofcond" type="textarea" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="RuleFormData.remark" type="textarea" />
    </el-form-item>
    <hr />
    <el-form-item el-form-item>
      <el-button type="success" @click="onsubmit" v-if="edata">修改</el-button>
      <el-button type="primary" @click="onsubmit" v-else>确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { FormRules } from 'element-plus'
import { onMounted } from 'vue'
import { BugRecordPost, BugRecordPut } from '@/api/Plant/indextwo'
import { RuleFormTypetwo } from './types/BugRecord'

type CateType = Omit<RuleFormTypetwo, 'children'>
const rules = reactive<FormRules<CateType>>({
  curetime: [{ required: true, message: '请选择防治时间', trigger: 'blur' }],
  cureobject: [{ required: true, message: '请输入防治对象', trigger: 'blur' }],
  curescale: [{ required: true, message: '请输入防治规模(亩)', trigger: 'blur' }],
  cureway: [{ required: true, message: '请输入防治方法', trigger: 'blur' }],
  preofcond: [{ required: true, message: '请输入情况说明', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})

const emit = defineEmits()

const RuleFormData: RuleFormTypetwo = reactive({
  curetime: '', //防治时间
  cureobject: '', //防治对象
  curescale: '', //防治规模(亩)
  cureway: '', //防治办法
  preofcond: '', //情况说明
  remark: '' //备注
})

const onsubmit = () => {
  // BugRecordPost(RuleFormData).then((res) => {
  //   emit('update:table-data', {
  //     ...RuleFormData,
  //     objectId: res.data.objectId
  //   })
  //   console.log(res);
  // })
  /////
  if (props.edata) {
    // 修改
    let { objectId } = props.edata
    BugRecordPut(objectId, RuleFormData).then(() => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId
      })
    })
  } else {
    //新增
    BugRecordPost(RuleFormData).then((res) => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId: res.data.objectId
      })
    })
  }
}

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: RuleFormTypetwo | null
}
const props = defineProps<PropsType>()
console.log('接收到了父级的props', props.edata)
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    let { curetime, cureobject, curescale, cureway, preofcond, remark } = props.edata
    RuleFormData.curetime = curetime
    RuleFormData.cureobject = cureobject
    RuleFormData.curescale = curescale
    RuleFormData.cureway = cureway
    RuleFormData.preofcond = preofcond
    RuleFormData.remark = remark
  } else {
    //点击到了新增按钮
    RuleFormData.curetime = ''
    RuleFormData.cureobject = ''
    RuleFormData.curescale = ''
    RuleFormData.cureway = ''
    RuleFormData.preofcond = ''
    RuleFormData.remark = ''
  }
})
</script>
<style>
.seekone {
  background-color: #2b59dd;
  color: white;
}

.backgauge {
  padding: 20px 30px;
}

.newhr {
  margin-bottom: 30px;
}
</style>
